<template>
  <div>
    <tabbar>
      <tabbar-item :selected="num == 1" >
        <img slot="icon" v-if="num == 1" src="@/assets/img/my/index.png">
        <img slot="icon" v-else src="@/assets/img/my/index2.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item :selected="num == 2" >
        <img slot="icon" v-if="num == 2" src="@/assets/img/my/set.png">
        <img slot="icon" v-else src="@/assets/img/my/set2.png">
        <span slot="label">套餐</span>
      </tabbar-item>
      <tabbar-item :selected="num == 3" >
        <img slot="icon" v-if="num == 3" src="@/assets/img/my/chat.png">
        <img slot="icon" v-else src="@/assets/img/my/chat2.png">
        <span slot="label">微聊</span>
      </tabbar-item>
      <tabbar-item :selected="num == 4" >
        <img slot="icon" v-if="num == 4" src="@/assets/img/my/my.png" >
        <img slot="icon" v-else src="@/assets/img/my/my2.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { Tabbar, TabbarItem, Group, Cell  } from 'vux'
export default {
  props: {
    num: ''
  },
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId
    })
  },
  data () {
    return {
    }
  },
}
</script>

<style lang="less" scoped>

span {
  margin-left: 0.08rem;
}

</style>
<style>
.weui-tabbar__icon img {
  width: 0.55rem!important;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: #128FEF!important;
}
</style>
